<template>
	<view class="mL15 mR15">
		<view class="pT30 pB30">
			<view class="t-center font21 bold">实付金额</view>
			<view class="t-center bold mT10">
				<text class="font14">￥</text>
				<text class="font30 bold">{{ totalAmount }}</text>
			</view>
			<view class="t-center font13 u-8bd mT5">用工保障</view>
		</view>
		<view class="bold font18  pB15">金额明细</view>
		<view class="bgf radius20 pT20 pB10 pL15 pR15">
			<view class="flex jst-between font15 mB10" v-for="(item,i) in amountDetails" :key="i">
				<view class="u-9">{{ item.title }}</view>
				<view class="u-red bold">{{ item.value }}元</view>
			</view>
		</view>
		<view v-if="wxSync">
			<view class="bold font18 pT25 pB15">支付方式</view>
			<view class="bgf radius20 pT20 pB20 pL15 pR15"  >
				<view class="flex jst-between font15 payItem" v-for="(item,i) in payWayLis" :key="i">
					<view>
						<view class="flex alg-center">
							<image class="payImg" :src="item.imgUrl" mode=""></image>
							<text class="mL10">{{item.typeName}}</text>
						</view>
						<view style="margin-left: 74rpx;" class="u-blue font13 mT10">
							当前余额：{{ item.balance }}
						</view>
					</view>
					
					
					<view @click="checkedPay(item,i)">
						<image class="w36" v-if="item.checked" src="/static/image/checked.png" mode=""></image>
					    <image class="w36" v-else="item.checked" src="/static/image/noCheck.png" mode=""></image>
					</view>
				</view>
				
			</view>
		</view>
		<view class="flex jst-center bottomW"  v-if="wxSync">
			<view class="pointer rightNowPay u-f font15 t-center" @click="rightNow">
				立即支付
			</view>
		</view>
	</view>
</template>

<script>
	import { payJob, pay } from "@/api/common.js"
	import { findEnterpriseInfoById, getBalance, getAllBalance } from "@/api/companyInterface/user.js";
	export default {
		data() {
			return {
				payWayLis:[
					{typeName:'余额支付',checked:true,imgUrl: this.resources.iconBalancePay,value:1,balance: 0.00},
					// {typeName:'支付宝支付',checked:true,imgUrl: this.resources.zfbImg,value:1},
					// {typeName:'微信支付',checked:false,imgUrl:this.resources.wxImg,value:0},
				],
				amountDetails: [],
				payWay:0,
				objPramas:{},
				totalAmount: 0,
				oddJobId: undefined,
				wxSync:null,
				isItCertified: false
			}
		},
		async onShow() {
			this.wxSync= await this.xf.getIsShowPay();
		},
		async onLoad(e) {
			this.oddJobId = e.oddJobId;
			let userInfo = this.xf.onlineUtils.getUserInfo()
			this.companyId = userInfo.companyId
			await this.payJobApi()
			await this.findEnterpriseInfoByIdApi()
			await this.getBalanceApi()
			
		},
		methods: {		
			getBalanceApi(){
				getBalance({}).then(res=>{
					if(res){
						const {result} = res
						this.payWayLis[0].balance = result.data
					}
				})
			},
			findEnterpriseInfoByIdApi(){
				findEnterpriseInfoById({}).then(res=>{
					if(res){
						this.isItCertified = res.result.isItCertified
					}
				})
			},
			payJobApi(){
				payJob({
					oddJobId: this.oddJobId,
				}).then(res=>{
					const {result} = res
					this.amountDetails = result.amountDetails
					this.totalAmount = result.totalAmount
					this.oddJobId = result.oddJobId
				})
			},
			//发布职位支付
			rightNow(){
				if(!this.isItCertified) {
					uni.showToast({
						icon:"none",
						title:"请先认证企业钱包"
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/common/myWallet/index'
						})
					}, 1000)
					return;
				}
				getAllBalance({}).then(res=>{
					const {result} = res
					if(Number(result.data) < Number(this.totalAmount)){
						return uni.showToast({
							icon:"none",
							title:"余额不足，请充值!"
						})
						
					} else {
						pay({
							oddJobId: this.oddJobId,
							paymentWay: this.payWay
						}).then(res=>{
							uni.showToast({
								icon:"none",
								title:"支付成功!"
							})
							setTimeout(()=>{
								uni.switchTab({
									url:"/pages/companyPage/my/index"
								})
							},2000)
						})
					}
				})
				
			},
			
			checkedPay(v,i){
				console.log(i)
				this.payWay=v.value
				this.payWayLis.map((z,index)=>{
					z.checked = index === i ? true : false
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		
		/* #ifdef MP-WEIXIN */
		height: 100%;
		/* #endif */
		background: linear-gradient(0deg, #F8FAFF, #EBF0FF);
	
	}
</style>
<style scoped lang="scss">
	.payImg{
		width: 52rpx;
		height: 52rpx;
	}
	.payItem{
		margin-bottom: 48rpx;
		&:last-child{
			margin-bottom: 0;
		}
	}
	.bottomW{
		position: fixed;
		bottom:40rpx;
		width: 100%;
		left: 0;
	}

</style>
